<template>
  <div class="app-container">
    <a-layout style="min-height: 100vh">
      <!-- 侧边栏 -->
      <a-layout-sider v-model:collapsed="collapsed" collapsible>
        <div class="logo">
          <h2 v-if="!collapsed">房价分析系统</h2>
          <h2 v-else>房价</h2>
        </div>
        <a-menu
          v-model:selectedKeys="selectedKeys"
          theme="dark"
          mode="inline"
        >
          <a-menu-item key="home" @click="navigateTo('/')">
            <home-outlined />
            <span>首页</span>
          </a-menu-item>
          <a-menu-item key="search" @click="navigateTo('/search')">
            <search-outlined />
            <span>房源搜索</span>
          </a-menu-item>
          <a-menu-item key="analysis" @click="navigateTo('/analysis')">
            <bar-chart-outlined />
            <span>房价分析</span>
          </a-menu-item>
          <a-menu-item key="data-analysis" @click="navigateTo('/data-analysis')">
            <pie-chart-outlined />
            <span>数据分析</span>
          </a-menu-item>

          <a-menu-item key="city-comparison" @click="navigateTo('/city-comparison')">
            <apartment-outlined />
            <span>城市对比</span>
          </a-menu-item>

        </a-menu>
      </a-layout-sider>
      
      <!-- 内容区域 -->
      <a-layout>
        <a-layout-header class="header">
          <div class="header-left">
            <menu-unfold-outlined
              v-if="collapsed"
              class="trigger"
              @click="() => (collapsed = !collapsed)"
            />
            <menu-fold-outlined
              v-else
              class="trigger"
              @click="() => (collapsed = !collapsed)"
            />
            <span class="header-title">{{ currentPageTitle }}</span>
          </div>
          <div class="header-right">
            <a-space>
              <a-dropdown>
                <a class="ant-dropdown-link" @click.prevent>
                  <user-outlined /> 用户 <down-outlined />
                </a>
                <template #overlay>
                  <a-menu>
                    <a-menu-item>
                      <user-outlined /> 个人中心
                    </a-menu-item>
                    <a-menu-item>
                      <setting-outlined /> 设置
                    </a-menu-item>
                    <a-menu-divider />
                    <a-menu-item>
                      <logout-outlined /> 退出登录
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </a-space>
          </div>
        </a-layout-header>
        
        <a-layout-content class="content">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </a-layout-content>
        
        <a-layout-footer class="footer">
          房价分析系统 ©2023 Created by Java爬虫团队
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  HomeOutlined,
  SearchOutlined,
  BarChartOutlined,
  LineChartOutlined,
  ApartmentOutlined,
  ClusterOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  SettingOutlined,
  LogoutOutlined,
  DownOutlined,
  PieChartOutlined
} from '@ant-design/icons-vue'

const router = useRouter()
const route = useRoute()

// 侧边栏折叠状态
const collapsed = ref(false)

// 当前选中的菜单项
const selectedKeys = ref([])

// 根据当前路由路径设置选中的菜单项
const updateSelectedKeys = (path) => {
  const key = path === '/' ? 'home' : path.substring(1)
  selectedKeys.value = [key]
}

// 页面标题映射
const pageTitles = {
  'home': '首页',
  'search': '房源搜索',
  'analysis': '房价分析',
  'trends': '价格趋势',
  'city-comparison': '城市对比',
  'district-analysis': '区域分析',
  'detail': '房源详情'
}

// 计算当前页面标题
const currentPageTitle = computed(() => {
  const path = route.path
  const key = path === '/' ? 'home' : path.split('/')[1]
  return pageTitles[key] || '房价分析系统'
})

// 导航到指定路由
const navigateTo = (path) => {
  router.push(path)
}

// 监听路由变化，更新选中的菜单项
watch(() => route.path, (newPath) => {
  updateSelectedKeys(newPath)
}, { immediate: true })
</script>

<style lang="scss">
// 全局样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 组件样式
.app-container {
  .logo {
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    
    h2 {
      color: white;
      margin: 0;
      font-size: 18px;
    }
  }
  
  .header {
    background: #fff;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    
    .header-left {
      display: flex;
      align-items: center;
      
      .trigger {
        font-size: 18px;
        cursor: pointer;
        transition: color 0.3s;
        
        &:hover {
          color: #1890ff;
        }
      }
      
      .header-title {
        margin-left: 16px;
        font-size: 16px;
        font-weight: 600;
      }
    }
    
    .header-right {
      .ant-dropdown-link {
        color: rgba(0, 0, 0, 0.65);
        cursor: pointer;
        
        &:hover {
          color: #1890ff;
        }
      }
    }
  }
  
  .content {
    margin: 16px;
    background: #fff;
    border-radius: 4px;
    overflow: auto;
  }
  
  .footer {
    text-align: center;
    color: rgba(0, 0, 0, 0.45);
  }
}

// 路由过渡动画
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style> 